<template>
	<view class="i-goods-banner">
		<view class="e-rela overflow-hidd" :class="[bodyClass]" :style="[bannerStyle]">
			<image class="bg-img" :src="option.backgroundImage" mode="aspectFill" v-if="option.backgroundType == 2" />
			<view class="i-goods-banner__body">
				<view class="banner-header" @tap="jumpLink(option.link)">
					<view class="header-title" :style="[{ color: option.titleTextColor }]">{{ option.titleText }}</view>
					<view class="sub-title" :style="[{ color: option.subTitleTextColor }]">{{ option.subTitleText }}</view>
					<view class="button" :style="[{ backgroundColor: option.buttonColor, color: option.buttonTextColor }]">
						{{ option.buttonText }}
					</view>
				</view>
				<layout-goods-list :storeId="storeId" :option="_option" :requestGoods="option.goodsType !== 1"></layout-goods-list>
			</view>
			
		</view>
	</view>
</template>

<script lang="ts" setup>
import type { GoodsItem } from '@/common/request/api';
import { computed } from 'vue';
import { useLayoutCompoments, useLayoutGoodsCompoments } from './hooks';
import { useCurrentInstance } from '@/common/hooks';
import { px2rpx } from './utils';
import type { pageLink } from './type';
import layoutGoodsList from './child/goods-list.vue';

const props = withDefaults(
	defineProps<{
		storeId?: string;
		option: {
			goodsList: GoodsItem[];
			styleType: 0 | 1 | 2;
			backgroundType: 1 | 2;
			backgroundColor: string;
			backgroundImage: string;
			titleText: string;
			titleTextColor: string;
			subTitleText: string;
			subTitleTextColor: string;
			buttonText: string;
			buttonColor: string;
			buttonTextColor: string;
			goodsType: 1 | 2 | 3;
			goodsCategory?: {
				name: string;
				id: string;
			};
			subarea?: {
				name: string;
				id: string;
			};
			categoryGoodsNumber: number;
			categoryGoodsSort: number;
			categoryGoodsSortType: number;
			paddingTop: number;
			paddingBottom: number;
			paddingX: number;
			radiusTop: number;
			radiusBottom: number;
			goodsBackgroundColor: string;
			goodsTitleColor: string;
			priceColor: string;
			link: pageLink;
		};
	}>(),
	{
		option: () => ({
			goodsList: [],
			styleType: 0,
			backgroundType: 2,
			backgroundColor: '',
			backgroundImage: '',
			titleText: '',
			titleTextColor: 'rgba(48, 49, 51, 1)',
			subTitleText: '',
			subTitleTextColor: 'rgba(48, 49, 51, 1)',
			buttonText: '',
			buttonColor: 'rgba(245, 34, 45, 1)',
			buttonTextColor: 'rgba(255, 255, 255, 1)',
			goodsType: 1,
			categoryGoodsNumber: 10,
			categoryGoodsSort: 1,
			categoryGoodsSortType: 1,
			paddingTop: 12,
			paddingBottom: 12,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0,
			goodsBackgroundColor: 'rgba(255, 255, 255, 1)',
			goodsTitleColor: 'rgba(48,49,51,1)',
			priceColor: 'rgba(245,34,45,1)',
			link: {
				pageUrl: '',
				linkUrl: ''
			}
		})
	}
);

const ctx = useCurrentInstance();
const { jumpLink } = useLayoutCompoments(ctx, props.option);
const { bodyClass, layoutClass } = useLayoutGoodsCompoments(ctx, props.option);

const bannerStyle = computed(() => {
	return {
		backgroundColor: props.option.backgroundType == 1 ? props.option.backgroundColor : '',
		padding: `${px2rpx(props.option.paddingTop)} ${px2rpx(props.option.paddingX)} ${px2rpx(props.option.paddingBottom)} ${px2rpx(props.option.paddingX)}`,
		borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)}  ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}`
	};
});
const _option = computed(() => {
	return { ...props.option,titleColor: props.option.goodsTitleColor, layoutType: 6, titleShow: true, priceShow: true, goodsRadiusTop: 5, goodsRadiusBottom: 5, goodsMargin: 7 };
});
</script>

<style lang="scss" scoped>
@import '@/components/list/css/layoutCommon.scss';

.i-goods-banner {
	padding: 20rpx;

	.bg-img {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
	}
	&__body{
		position: relative;
		z-index: 1;
	}

	.banner-header {
		padding: 20rpx 0 40rpx 0;
		

		.header-title {
			font-size: 30rpx;
			margin-bottom: 10rpx;
		}

		.sub-title {
			font-size: 44rpx;
			font-weight: 600;
			line-height: 60rpx;
			margin-bottom: 20rpx;
		}

		.button {
			text-align: center;
			width: 200rpx;
			line-height: 64rpx;
			border-radius: 32rpx;
		}
	}
}
</style>
